<template>
	<view>
		<myline></myline>
		<view class="inptop">
			<view class="detitle">
				验证码:
			</view>
			<!--  -->
			<uni-easyinput  trim="all" v-model="usercode" placeholder="输入验证码" ></uni-easyinput>
			<view class="">
				 <button :type="! disabled? 'success' : 'info' "   @tap="sendCode"  :disabled="disabled" style="color: #1a9c34;">{{codeMsg}}</button>
			</view>
			
		</view>
		<view class="" v-if=" usercode === getcode ? true:false">
			<uni-easyinput type="password" v-model="userpassword" placeholder="请输入密码" ></uni-easyinput>
		</view>
		<myline></myline>
		<view style="font-size: 24rpx;color: dimgray; margin-top: 10rpx;">
			已经向{{phone}}发送验证码
		</view>
		<view class="logtop">

			<view class="telbot">
				<view class="contel" @tap="goNext">
					完成
				</view>

			</view>
			<view class="tipc">
				继续注册表示您阅读并同意
				<view class="f-active-color">
					《约教易达服务协议》
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import myline from '@/components/common/Lines.vue'
	import $http from '@/common/api/request.js'
	import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				usercode: '',//用户输入的手机号
				codeNum: 60,//验证码倒计时
				codeMsg: "发送",//按钮文字信息
				disabled: false,//按钮是否禁用
				phone: "",//向上个页面拿过来的手机号数据
				getcode: "",//这是服务器要求你写的
				userpassword:"",
				rules: {
					userpassword: {
						rule: /^[a-zA-Z0-9]{6,16}$/,
						msg: "密码不符合规范"
					},
				}
			};
		},
		components: {
			myline
		},
		onLoad(e) {
			//直接拿手机号:
			this.phone = e.tel
		},
		onReady() {
			this.sendCode()
		},
		methods: {
			//校验规则:
			validate(key) {
				let bool = true;
				if (!this.rules[key].rule.test(this[key])) {
					uni.showToast({
						title: this.rules[key].msg,
						icon: "none"
					})
					bool = false;
					return bool;
				}
				return bool;
			},
			...mapMutations(['login']),
			//上来就发送验证码,上来就执行
			sendCode() {
				
				let timer = setInterval(() => {
					--this.codeNum;
					this.codeMsg = `${this.codeNum}`
				}, 1000)
				//开启定时器
				setTimeout(() => {
					clearInterval(timer);
					this.codeNum = 60;
					this.disabled = false;
					this.codeMsg = "发送"
				}, 60000)
				this.disabled = !this.disabled;
				$http.request({
					url: "/code",
					method:"POST",
					data:{
						phone:this.phone,
					}
				}).then((res) => {
					this.getcode=res.code
					
					setTimeout(()=>{
						uni.showToast({
						title:res.code,
						icon:"none",
						duration:500,
						mask:true
					})
					},3000)
					
				}).catch(() => {
					uni.showToast({
							title:res.msg,
							mask:true,
							duration:1500,
							icon:"fail"
						})
				})
			},
			goNext() {
				if (this.getcode === this.usercode) {
					if(! this.validate("userpassword")){
						return 
					}
					
					$http.request({
						url: "/addUser",
						method:"POST",
						data:{
							phone:this.phone,
							code:this.usercode,
							userpassword:this.userpassword
						}
					}).then((res) => {
						if(res.code == 200){
							uni.showToast({
								title:res.msg,
								icon:"none",
								duration:500,
								mask:true
							})
							this.$nextTick(()=>{
								uni.navigateTo({
									url:`/pages/login/login?currentindex=1&username=${res.data.userName}`
								})
							})
						}

					}).catch(() => {
						uni.showToast({
								title:"请求失败",
								mask:true,
								duration:1500,
								icon:"none"
							})
					})
				} else {
					
					uni.showToast({
						title: "验证码错误",
						icon: "none",
						mask: true,
						duration: 1500
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.inptop {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 130rpx;
		padding: 10rpx 10rpx;
		.inpp {}

		.detitle {
			margin-right: 15rpx;
			
		}

		.decode {
			font-size: 26rpx;
			border-radius: 20rpx;
			width: 200rpx;
			height: 80rpx;
			border: 1rpx solid #1a9c34;
		}
	}

	.telbot {
		margin-top: 30rpx;
		display: flex;
		justify-content: center;

		.contel {
			padding: 20rpx 0 20rpx;
			border: 1rpx solid #282c35;
			border-radius: 40rpx;
			font-size: $uni-font-size-lg;
			width: 85%;
			text-align: center;
			background-color: #e43447;
			color: $uni-text-color-inverse;
		}
	}

	.tipc {
		margin-top: 20rpx;
		text-align: center;
		font-size: $uni-font-size-base;
		color: $uni-text-color-grey;
	}
</style>